<template>
  <a-card>
    <a-form @submit="handleSubmit" :form="form" class="form">
      <a-row :gutter="[8]">
        <a-col :xl="4" :lg="6" :md="8" :sm="12">
          <a-form-item>
            <a-input placeholder="请输入编码" />
          </a-form-item>
        </a-col>
        <a-col :xl="4" :lg="6" :md="8" :sm="12">
          <a-form-item>
            <a-input placeholder="请输入名称" />
          </a-form-item>
        </a-col>
        <a-col :xl="4" :lg="6" :md="8" :sm="12">
          <a-form-item>
            <a-space>
              <a-button type="primary">查询</a-button>
              <a-button>重置</a-button>
            </a-space>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <vxe-toolbar>
      <template #buttons>
        <a-space>
          <a-radio-group default-value="全部">
            <a-radio value="全部">
              全部（100）
            </a-radio>
            <a-radio value="待派工">
              待派工（30）
            </a-radio>
            <a-radio value="已派工">
              待派工（30）
            </a-radio>
            <a-radio value="进行中">
              进行中（30）
            </a-radio>
            <a-radio value="已完成">
              已完成（30）
            </a-radio>
            <a-radio value="已删除">
              已删除（30）
            </a-radio>
          </a-radio-group>
        </a-space>
      </template>
    </vxe-toolbar>

    <vxe-table ref="xTable1" border stripe height="400"
      :checkbox-config="{ trigger: 'row', highlight: true, range: true }" :column-config="{ resizable: true }"
      :row-config="{ isHover: true }" :data="tableData"
      :custom-config="{ storage: true, checkMethod: checkColumnMethod }">
      <vxe-column type="checkbox" width="40"></vxe-column>
      <vxe-column type="seq" width="30"></vxe-column>
      <vxe-column field="工序" title="工序" sortable show-overflow width="150">
        <template #default="{ row }"><a href="#">{{ row.工序?row.工序:'总装' }}</a></template>
      </vxe-column>
      <vxe-column field="物料" title="物料" sortable show-overflow width="150"></vxe-column>
      <vxe-column field="工作中心" title="工作中心" sortable show-overflow width="150"/>
      <vxe-column field="计划数量" title="计划数量" sortable show-overflow width="100"></vxe-column>
      <vxe-column field="计划开始日期" title="计划开始日期" sortable show-overflow width="150"></vxe-column>
      <vxe-column field="计划结束日期" title="计划结束日期" sortable show-overflow width="150"></vxe-column>
      <vxe-column field="实际开始时间" title="实际开始时间" sortable show-overflow width="150"></vxe-column>
      <vxe-column field="实际结束时间" title="实际结束时间" sortable show-overflow width="150"></vxe-column>
      <vxe-column field="生产工单" title="生产工单" sortable width="150">
        <template #default="{ rowIndex }"><a href="#">P_20231010-0000{{ rowIndex }}</a></template>
      </vxe-column>
      <vxe-column field="批次号" title="批次号" sortable width="150">
        <template #default="{ rowIndex }"><a href="#">P_20231010-0000{{ rowIndex }}</a></template>
      </vxe-column>
      <vxe-column field="生产订单" title="生产订单" sortable width="150"></vxe-column>
      <vxe-column field="备注" title="备注" show-overflow width="200"></vxe-column>
      <vxe-column field="进度" title="进度" fixed="right" show-overflow width="100" align="right"></vxe-column>
      <vxe-column field="状态" title="状态" fixed="right" sortable show-overflow width="100">
        <template #default="{ row }"><a-tag color="green">{{ row.状态 }}</a-tag></template>
      </vxe-column>
      <vxe-column field="操作" title="操作" fixed="right" width="100">
        <template #default>
          <a-button type="link">调整</a-button>
        </template>
      </vxe-column>
    </vxe-table>
    <vxe-pager border icon-prev-page="vxe-icon-arrow-left" icon-jump-prev="vxe-icon-arrow-double-left"
      icon-jump-next="vxe-icon-arrow-double-right" icon-next-page="vxe-icon-arrow-right"
      icon-jump-more="vxe-icon-ellipsis-h" :loading="loading" :current-page="1" :page-size="20" :total="100"
      :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']" @page-change="handlePageChange">
    </vxe-pager>
  </a-card>
</template>

<script>
export default {
  name: 'Table',
  data() {
    return {
      loading: false,
      page: 1,
      pageSize: 10,
      total: 0,
      tableData: [
        {
          "进度": "0/500",
          "状态": "排产中",
          "备注": "",
        },
        {
          "进度": "100/500",
          "状态": "生产中",
          "备注": "",
        },
        {
          "进度": "500/500",
          "状态": "已完成",
          "备注": "",
        },
        {
          "进度": "0/500",
          "状态": "已删除",
          "备注": "",
        }
      ]
    };
  },
  created() {
  },
  methods: {},
}
</script>

<style scoped lang="less"></style>